<template>
  <view class="myProperty">
    <view class="PropertyYTopBox">
      <view class="PropertyYTop"  :style="{backgroundImage: 'url(' + bgImage +')'}">
        <view class="account-deposit">
          <view class="depositTxt">
            可提现余额账户
            <text class="earnings-icon" @click="explain">?</text>
          </view>
          <view class="account-money">{{balanceAccountFrom.withdrawableBalance + '' || '-'}}</view>
        </view>
      </view>
      <view class="dataStatusList">
        <view class="datastore itemWire">
          <view class="item_money"><text>￥</text> {{balanceAccountFrom.accumulatedIncome + '' || '-'}}</view>
          <view class="item_status">可提现余额</view>
        </view>
        <view class="datastore">
          <view class="item_money"><text>￥</text> {{balanceAccountFrom.withdrawalAmount + '' || '-'}}</view>
          <view class="item_status">已提现</view>
        </view>
      </view>
      <view class="openTicket">
        <view class="hintIcon">
          <image style="width: 29rpx; height: 37rpx;" src="../../static/image/hint.png" mode=""></image>
        </view>
        <view class="openTicket-txt">
          余额提现时，需要您提供等额的增值税专用发票，为了确保您能正常提现，请按照平台的提现要求，进行申请提现。
        </view>
      </view>
    </view>
      <view class="cutOff"></view>
    <view class="Property-b">
      <view class="uni-padding-wrap uni-common-mt">
        <button class="cancel" @click="detailView" style="margin-left: 0;">
          <image class="withdraw" src="../../static/image/detail.png" mode=""></image>
          <text class="withdrawTxt">明细</text>
        </button>
        <button type="primary" class="affirm" @click="toWithdraw">
          <image class="withdraw" src="../../static/image/tixian.png" mode=""></image>
          <text class="withdrawTxt">提现</text>
        </button>
      </view>
      <view class="" style="font-size: 28rpx;text-align: center;color: #999999;margin-top: 20rpx;">
        <text>提现时间：每月6-15号平台开放提现</text>
        <!-- <text>提现时间：每周二提现</text> -->
      </view>
    </view>
    <!-- 名词解释弹窗 -->
    <uni-popup class="join-pop" ref="popup" type="center" :maskClick="false" :show="isShow">
      <view class="pop-box">
        <view class="nounTitleBox">
          <view class="nounTitle">可提现余额账户</view>
        </view>
        <view class="nounContent">
          <!-- <view class="nounContent-tit">[可提现余额账户]</view> -->
          <view class="nounContent-txt">
            此余额可提现至银行卡，提现时需要提供与提现金额等额的专用发票，审核通过后，直接结算至您的提现银行卡内。
          </view>
        </view>
        <view class="pop-box-footer">
          <button type="primary" class="sub-btn sub2" @click="closePop">确认</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import uniPopup from "@/components/uni-popup/components/uni-popup/uni-popup.vue"
import { assetsData,incomeDetails,accountDetails } from "@/service/property/proprety.service.js"
export default {
  components: { uniPopup },
  data () {
    return {
      bgImage: require('../../static/image/property.png'),
      balanceAccountFrom: {
        withdrawableBalance: '',
        accumulatedIncome: '',
        withdrawalAmount: ''
      },
      isShow:false // 弹框
    }
  },
  onShow () {
    this.assetsDatas();
  },
  methods: {
    assetsDatas () { //获取我的资产数据
      assetsData({}, (res => {
        if (res.status == 0) {
          this.balanceAccountFrom = res.data;
        }
      }))
    },
    detailView () { // 明细
      uni.navigateTo({
        url: '/pages/billingDetail/billIndex'
      })
    },
    toWithdraw () { // 提现
      uni.navigateTo({
        url: '/pages/cashWithDrawal/index'
      })
    },
    explain () { //名词解释弹框
      this.isShow = true;
    },
    closePop () {
      this.isShow = false;
    }
  }
}
</script>

<style lang="scss" scoped>
  .myProperty {
			min-height: calc(100vh);
      background-color: #FFFFFF;
    .PropertyYTopBox {
      .PropertyYTop {
        height: 503rpx;
        background-size: cover;
        padding-top: 39rpx;
        .account-deposit {
          margin-top: 128rpx;
          text-align: center;
          .depositTxt {
            display: inline;
            font-size:26rpx;
            font-weight:500;
            color:rgba(225,225,225,1);
            .earnings-icon {
              display: inline-block;
              width: 14px;
              height: 14px;
              border: 1px solid white;
              border-radius: 50%;
              font-size: 11px;
              color: #FFFFFF;
              text-align: center;
              line-height: 14px;
              margin-left: 14px;
            }
          }
          .account-money {
            margin-top: 58rpx;
            font-size:62rpx;
            font-weight:bold;
            color:rgba(255,255,255,1)
          }
        }
      }
      .dataStatusList {
        display: flex;
        justify-content: space-between;
        padding-bottom: 42rpx;
        .datastore {
          width: 50%;
          text-align: center;
          margin-top: 72rpx;
          .item_money {
            text {
              font-size:26rpx;
            }
            font-size:49rpx;
            font-weight:bold;
            color:rgba(194,172,120,1);
          }
          .item_status {
            font-size:28rpx;
            font-weight:500;
            color:rgba(153,153,153,1);
          }
        }
      }
      .openTicket {
        display: flex;
        justify-content: space-between;
        border-top: 1px solid #FAFAFA;
        padding: 30rpx 32rpx;
        .hintIcon {
          margin-top: 10rpx;
        }
        .openTicket-txt {
          font-size:22rpx;
          font-weight:500;
          color:rgba(153,153,153,1);
          margin-left: 18rpx;
        }
      }
      .itemWire {
        // height: 93rpx;
        border-right: 1px solid rgba(225,225,225,1);
      }
    }
    .cutOff {
			width: 100%;
			height: 20rpx;
			background:rgba(250,250,250,1);
		}
    .Property-b {
      .uni-common-mt button {
        width: 237rpx;
        height: 70rpx;
        font-size:30rpx;
        font-weight: 500;
        display: inline-block;
        line-height: 65rpx;
        // margin:21rpx 10rpx;
          margin-left: 32rpx;
      }
      .cancel {
        color:rgba(67,67,67,1);
        background: #FFFFFF;
      }
      .affirm {
        background: #434343;
        color: rgba(246, 218, 153, 1);
      }
      .uni-common-mt{
        width: 100%;
        text-align: center;
        bottom: 0;
				margin-top: 10%;
        background-color: #FFFFFF;
        uni-button:after {
          border: 1px solid rgba(67,67,67,1);
        }
      }
      .withdraw {
        width: 36rpx;
        height: 36rpx;
        vertical-align: middle;
        margin-right: 20rpx;
      }
      .withdrawTxt {
        vertical-align: middle;
      }
    }
    .pop-box {
      .nounTitleBox {
        border-bottom: 1rpx solid #E1E1E1;
        margin: 0 15rpx;
        .nounTitle {
          font-size:30rpx;
          color:rgba(51,51,51,1);
          padding: 20rpx 0 30rpx;
          text-align: center;
        }
      }
      .nounContent {
        padding: 26rpx 30rpx 48rpx;
        .nounContent-tit {
          font-size: 26rpx;
          font-weight: 600;
        }
        .nounContent-txt {
          font-size: 22rpx;
          color: #999999;
          margin-top: 10rpx;
        }
      }
      &-footer {
        display: flex;
        justify-content: space-between;
        .sub-btn {
          width: 260rpx;
          height: 60rpx;
          line-height: 60rpx;
          color: #F6DA99;
          font-size: 24rpx;
          background-color: #434343;
          border: none;
          &.yellow {
            width: 180rpx;
            background-color: #F6DA99;
            color: #434343;
          }
          &.sub2 {
            width: 100%;
          }
        }
      }
    }
  }
</style>
